<script>
  let { label, amount, plus, minus } = $props();

  const onkeydown = (ev) => {
    // TODO: support common custom arrow bindings
    if (ev.key === '+' || ev.key === 'ArrowRight') {
      plus();
    } else if (ev.key === '-' || ev.key === 'ArrowLeft') {
      minus();
    }
  };
</script>

<div tabindex="0" {onkeydown}>
  {label} {amount}
  <button tabindex="-1" onclick={minus}>-</button>
  <button tabindex="-1" onclick={plus}>+</button>
</div>
